<template>
<div id="Liuyan" class="page-blank">
  <van-nav-bar title="用户留言" left-arrow @click-left="goBack()"/>
  <van-search v-model="searchValue" placeholder="请输入关键字" show-action shape="round">        
    <div slot="action" @click="onSearch" class="ft-blue">搜索</div>
  </van-search>
  <div style="height: 1px; background: #F1F1F1;"></div>
  <div class="flex-body">
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getList">
      <div class="liuyan-box" v-for="(item, index) in list" :key="index">
        <div class="liuyan-title">
          <span>{{ item.createTime }}</span>
          <span>{{ item.creator }}</span>
        </div>
        <div class="liuyan-body">{{ item.guestbook }}</div>
      </div>
    </van-list>
    
  </div>
</div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import axios from '@/utils/request';

@Component
export default class app extends Vue {

  list: any = []

  loading: boolean = false
  finished: boolean = false
  page: any = 1
  searchValue: any = ''
  
  getList() {
    let page = this.page, size = 10;
    let query: any = { page, size };
    if(this.searchValue) query.guestbook = this.searchValue;
    axios.get('/api/UserFeedbackController/getuserFeedbackList', query).then((res: any) => {
      let json = res || {};
      let list = json.list || [];
      this.page = page + 1;
      this.loading = false;
      this.list.push( ...list );
      if(json.isLastPage) this.finished = true;
    }).catch((err: any) => {
      this.loading = false;
    });
  }
  onSearch() {
    this.page = 1;
    this.list = [];
    this.loading = true;
    this.finished = false;
    this.getList();
  }

  goBack() {
    this.$router.go(-1);
  }

  mounted() {
  }
  
};
</script>

<style lang="scss">
#Liuyan {
  .liuyan-box {
    width: 6.7rem;
    padding: 0 0.15rem;
    box-sizing: border-box;
    border-radius: 0.05rem;
    background: #FFFFFF;
    margin: 0.2rem auto;
    overflow: hidden;
    box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 );
    .liuyan-title {
      height: 0.9rem;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      font-size: 0.3rem;    
    }
    .liuyan-body {
      font-size: 0.3rem;
      line-height: 0.5rem;
      margin-bottom: 0.1rem;
    }
  }
}
</style>

